<template>
  <card>
    <div class="header-input">
      <el-input v-model="keyword" placeholder="搜索变量" />
    </div>
    <div class="content">
      <div class="input-var var-box">
        <div class="title">用户输入</div>
        <div class="var-list">
          <el-collapse v-model="inputActiveNames">
            <el-collapse-item v-for="(type, index) in inputVarList" :key="index" :name="index" :title="type.name">
              <variable-item :list="variableList[type.id]" @add-var="addVariable" @go-anchor="goAnchor" />
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>

      <div class="chat-var var-box">
        <div class="title">问答结果</div>
        <div class="var-list">
          <variable-item :list="variableList['ai_chat']" @go-anchor="goAnchor" />
        </div>
      </div>

      <div class="search-var var-box">
        <div class="title">AI搜索引擎变量</div>
        <div class="var-list">
          <el-collapse v-model="aiActiveNames">
            <el-collapse-item v-for="(type, index) in aiVarList" :key="index" :name="index" :title="type.name">
              <variable-item :list="variableList[type.id]" @go-anchor="goAnchor" />
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>

      <div class="knowledge-var var-box">
        <div class="title">本地知识库变量</div>
        <div class="var-list">
          <variable-item :list="variableList['ai_knowledge']" @go-anchor="goAnchor" />
        </div>
      </div>

      <div class="web-var var-box">
        <div class="title">定向网页检索变量</div>
        <div class="var-list">
          <variable-item :list="variableList['web_content']" @go-anchor="goAnchor" />
        </div>
      </div>
    </div>
  </card>
</template>

<script>
  import Card from '@/views/adminClient/components/Card.vue'
  import VariableItem from '@/views/adminClient/components/VariableItem.vue'

  export default {
    name: 'VariableCard',
    components: { VariableItem, Card },
    props: {
      variableList: {
        type: Object,
        default() {
          return {
            parameters: [],
            input: [],
            ai_chat: [],
            ai_search: [],
            ai_knowledge: [],
            web_content: [],
          }
        },
      },
    },
    data() {
      return {
        keyword: '',
        list: {
          parameters: [
            { name: '表单1', pid: 2, doc_tags: 0 },
            { name: '表单2', pid: 2, doc_tags: 0 },
            { name: '所属行业', pid: 2, doc_tags: 0 },
          ],
          input: [
            { name: '第五步·用户输入信息', pid: 2, doc_tags: 0 },
            { name: '第十步·用户输入信息', pid: 2, doc_tags: 0 },
          ],
          ai_gpt: [
            { name: '第一步', pid: 2, doc_tags: 0 },
            { name: '第二步', pid: 2, doc_tags: 1 },
            { name: '第三步', pid: 2, doc_tags: 1 },
          ],
          ai_search: [
            { name: '第一步', pid: 2, doc_tags: 0 },
            { name: '第二步', pid: 2, doc_tags: 1 },
            { name: '第三步', pid: 2, doc_tags: 1 },
          ],
          ai_knowledge: [
            { name: '第一步', pid: 2, doc_tags: 0 },
            { name: '第二步', pid: 2, doc_tags: 1 },
            { name: '第三步', pid: 2, doc_tags: 1 },
          ],
          web_content: [
            { name: '第一步', pid: 2, doc_tags: 0 },
            { name: '第二步', pid: 2, doc_tags: 1 },
            { name: '第三步', pid: 2, doc_tags: 1 },
          ],
        },
        inputActiveNames: [0, 1],
        inputVarList: [
          { name: '表单收集', id: 'parameters' },
          { name: '中间步用户输入', id: 'input' },
        ],
        // qaActiveNames: [0],
        aiActiveNames: [0, 1],
        aiVarList: [
          { name: '天工搜索（增强）', id: 'ai_search' },
          { name: '天工搜索（研究）', id: 'ai_search' },
        ],
      }
    },
    methods: {
      addVariable(variable) {
        this.$emit('add-var', variable)
      },
      goAnchor(id) {
        this.$emit('go-anchor', id)
      },
    },
  }
</script>

<style scoped lang="scss">
  .header-input {
    margin: 0 0 15px;
  }

  .content {
    display: grid;
    height: calc(100% - 50px);
    overflow: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    //grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-rows: 40% 30% 30%;
    grid-gap: 25px;
    grid-auto-flow: column;

    .var-box {
      height: 100%;
      .title {
        font-size: 16px;
        margin: 0 0 5px;
      }
      .var-list {
        height: calc(100% - 43px);
        background: #e5e8ee;
        border-radius: 8px;
        overflow-y: auto;
        padding: 10px;

        ::v-deep .el-collapse {
          border: none;

          .el-collapse-item__header {
            height: 28px;
            line-height: 28px;
            background: transparent;
            border: none;
            color: #999999;
          }

          .el-collapse-item__wrap {
            background: transparent;
            border: none;

            .el-collapse-item__content {
              padding: 0;
            }
          }
        }

        .var {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 0 5px;
          line-height: 21px;

          .var-icon,
          .var-icon-location {
            width: 12px;
            height: 12px;
            margin-right: 5px;
            vertical-align: baseline;
          }

          .var-icon-location {
            cursor: pointer;
            margin-right: 15px;
          }

          .var-name {
            font-size: 12px;
          }

          .suffix {
            margin-left: 5px;
            font-size: 7px;
          }
        }
      }
    }

    .chat-var {
      grid-row-start: 2;
      grid-row-end: 4;
    }
  }
</style>
